<template>
    <div class="return">
        <van-card 
            :price="detail.price" 
            :title="detail.name" 
            :thumb="detail.url" 
            :num="detail.order_num"
        >
        </van-card>
        <div class="message">
            <van-field
                v-model="message"
                rows="3"
                autosize
                label="退货原因"
                type="textarea"
                maxlength="50"
                placeholder="请输入退货原因"
                show-word-limit
            />
        </div>
        <div class="num">
            <van-field v-model="number" type="number" label="退货数量" placeholder="请输入退货数量" />
        </div>
        <div class="uploader">
            <h5>上传图片(最多三张)</h5>
            <van-uploader 
                v-model="fileList" 
                :max-count="3" 
                :after-read='afterRead'
                :max-size="500*1024*1024" 
                @oversize="onOversize"
                @delete='deleteImg'
            />
        </div>
        <div class="btn">
            <van-button @click="returnSubmit" type="primary" size="large">提交</van-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            detail:[],//商品详情
            fileList:[],//图片列表
            message:null,//退货原因
            number:null,//数量
            imgArr:[],//上传成功图片列表
        }
    },
    computed: {
        ...mapState(['openid', 'userState']),
        apiUrl() {
            return this.userState == 0 ? this.$api.merchantShow:this.$api.platformShow
        },
        imgArrId() {
            let arr = this.imgArr.map(item => {
                return item.id
            })
            return arr.toString()
        }
    },
    mounted(){
        this._get()
    },
    methods:{
        //提交
        async returnSubmit() {
            if(!this.message) {
                this.$toast('请输入退货原因')
                
            }else if(!this.number) {
                this.$toast('请输入退货数量')
                
            }else if(this.number > this.detail.order_num) {
                this.$toast('退货数量不能大于购买数量')
                
            }else if(this.imgArr.length == 0) {
                this.$toast('请上传图片')
                
            }else{
                let form = {
                    order_code: this.$route.params.order_code,
                    pic_id: this.imgArrId,
                    reason: this.message,
                    id: this.detail.id,
                    out_num: this.number,
                    pice: this.detail.subtotal,
                    openid: this.openid
                }
                let { data: { code, data  } } = await this.$http.post(this.$api.merchantApply,form)
                if (code === 0) {
                    this.$toast(data)
                    setTimeout(() => {
                        this.$router.replace({
                        name: 'Center'
                        })
                    }, 1500)
                }
            }
        },
        //删除图片
        deleteImg(file,index){
            console.log(file,index)
            this.imgArr.splice(index.index,1)
            console.log('this.imgarr-------',this.imgArr)
        },
        //超过大小显示
        onOversize(file) {
            console.log(file);
            this.$toast('文件大小不能超过 5M');
        },
        //文件读取完成后
        afterRead(file){
            console.log(file)
            this.uploadPicture(file.file)
        },
        async uploadPicture(img){
            console.log(img)
            try {
                this.fileList[this.fileList.length-1].status='uploading'
                this.fileList[this.fileList.length-1].message='上传中...'
                let formData = new FormData()
                formData.append('name', img)
                let {data:{code,data}} = await this.$http.post(this.$api.merchantImage,formData)
                if (code === 0) {
                    this.fileList[this.fileList.length-1].status='done'
                    this.fileList[this.fileList.length-1].message='上传成功'
                    this.imgArr.push({
                        id: data.id,
                        url: data.url
                    })
                }else{
                    this.fileList[this.fileList.length-1].status='failed'
                    this.fileList[this.fileList.length-1].message='上传失败'
                    console.log(this.fileList)
                }
            } catch (error) {
                console.log(this.fileList)
                this.fileList[this.fileList.length-1].status='failed'
                this.fileList[this.fileList.length-1].message='上传失败'
            }
            
        },
        //获取详情
        async _get() {
            let { data: { code, data } } = await this.$http.get(this.apiUrl,{
                order_code: this.$route.params.order_code,
                openid: this.openid
            })
            if(code === 0) {
                this.detail = data[this.$route.params.index]
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .return{
        .van-card{
            background-color: #fff;
        }
        .message{
            margin-top: 0.5rem;
        }
        .num{
            margin-top: 0.5rem;
        }
        .uploader{
            background-color: #fff;
            padding: 1rem;
            margin-top: 0.5rem;
            h5{
                font-size: 14px;
                padding-bottom: 1rem;
            }
        }
        .btn{
            margin-top: 2rem;
        }
    }
</style>